<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>组件插槽</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.container {
				width: 600px;
				min-height: 150px;
				border: 1px solid black;
				background-color: pink;
				height: auto;
			}

			.current {
				color: blue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<name-list :list='names'>
				<!-- template标签是vue提供的占位符 ,slotProps自定义的临时变量-->
				<template scope='slotProps'>
					<!-- info从子组件中通过插槽的自定义的info属性传入的值 -->
					<strong v-if='slotProps.info.id==1004' class='current'>
						{{slotProps.info.name}}
					</strong>
					<span v-else>{{slotProps.info.name}}</span>
				</template>
			</name-list>
		</div>
		<script>
			Vue.component('name-list', {
				props: ['list'],
				template: `<div class="container">
				              <ul>
							    <li :key='item.id' v-for='item in list'>
								  <slot :info='item'>{{item.name}}</slot>
								</li>
							  </ul>
				           </div>`
			});

			//1. 实例化一个Vue的实例
			let vm = new Vue({
				el: '#app',
				data: {
					names: [{
							id: 1001,
							name: 'haoren'
						},
						{
							id: 1002,
							name: 'lucy'
						},
						{
							id: 1003,
							name: 'lily'
						},
						{
							id: 1004,
							name: 'jerry'
						},
						{
							id: 1005,
							name: 'tom'
						}
					]
				}
			});
		</script>
	</body>
</html>
